<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Brio Web App - Bootstrap Admin Template + AngularJS</title>

    <meta name="description" content="">
    <meta name="author" content="Akshay Kumar">

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap/bootstrap.css"/>

    <!-- Fonts  -->
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,500,600,700,300' rel='stylesheet' type='text/css'>

    <!-- Base Styling  -->
    <link rel="stylesheet" href="assets/css/app/app.v1.css"/>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>

<!-- Preloader -->
<div class="loading-container">
    <div class="loading">
        <div class="l1">
            <div></div>
        </div>
        <div class="l2">
            <div></div>
        </div>
        <div class="l3">
            <div></div>
        </div>
        <div class="l4">
            <div></div>
        </div>
    </div>
</div>
<!-- Preloader -->

<aside class="left-panel">

    <div class="user text-center">
        <img src="assets/images/avtar/user.png" class="img-circle" alt="...">
        <h4 class="user-name">Akshay Kumar</h4>

        <div class="dropdown user-login">
            <button class="btn btn-xs dropdown-toggle btn-rounded" type="button" data-toggle="dropdown"
                    aria-expanded="true">
                <i class="fa fa-circle status-icon available"></i> Available <i class="fa fa-angle-down"></i>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                <li role="presentation"><a role="menuitem" href="#"><i class="fa fa-circle status-icon busy"></i>
                    Busy</a></li>
                <li role="presentation"><a role="menuitem" href="#"><i class="fa fa-circle status-icon invisibled"></i>
                    Invisible</a></li>
                <li role="presentation"><a role="menuitem" href="#"><i class="fa fa-circle status-icon signout"></i>
                    Sign out</a></li>
            </ul>
        </div>
    </div>


    <nav class="navigation">
        <ul class="list-unstyled">
            <li><a href="index.html"><i class="fa fa-bookmark-o"></i><span class="nav-label">Dashboard</span></a></li>
            <li class="has-submenu"><a href="#"><i class="fa fa-comment-o"></i> <span class="nav-label">Widgets &amp; Apps</span></a>
                <ul class="list-unstyled">
                    <li><a href="email.html">Email</a></li>
                    <li><a href="timeline.html">Timeline</a></li>
                    <li><a href="calendar.html">Calendar</a></li>
                    <li><a href="notes.html">Notes</a></li>
                    <li><a href="file-browser.html">File Browser</a></li>
                </ul>
            </li>
            <li class="has-submenu active"><a href="#"><i class="fa fa-flag-o"></i> <span
                    class="nav-label">UI Elements</span></a>
                <ul class="list-unstyled">
                    <li class="active"><a href="uielements-general.html">General Elements</a></li>
                    <li><a href="buttons.html">Buttons</a></li>
                    <li><a href="icons.html">Icons</a></li>
                    <li><a href="typography.html">Typography</a></li>
                    <li><a href="grid.html">Grid</a></li>
                    <li><a href="panels.html">Panels</a></li>
                </ul>
            </li>
            <li class="has-submenu"><a href="#"><i class="fa fa-file-text-o"></i> <span
                    class="nav-label">Forms</span></a>
                <ul class="list-unstyled">
                    <li><a href="forms-element.html">General Elements</a></li>
                    <li><a href="forms-validation.html">Form Validation</a></li>
                    <li><a href="wysihtml.html">Wysihtml</a></li>
                    <li><a href="file-upload.html">File Upload</a></li>
                    <li><a href="image-crop.html">Image Crop</a></li>
                </ul>
            </li>
            <li class="has-submenu"><a href="#"><i class="fa fa-heart-o"></i> <span
                    class="nav-label">Table &amp; Grid</span></a>
                <ul class="list-unstyled">
                    <li><a href="basic-tables.html">Basic Tables</a></li>
                    <li><a href="data-tables.html">Data Table</a></li>
                </ul>
            </li>
            <li class="has-submenu"><a href="#"><i class="fa fa-code"></i> <span class="nav-label">Charts</span></a>
                <ul class="list-unstyled">
                    <li><a href="chart-variants.html">Chart Variants</a></li>
                    <li><a href="gauges.html">Gauges</a></li>
                    <li><a href="vector-maps.html">Vector Maps</a></li>
                    <li><a href="range-selector.html">Range Selector</a></li>
                </ul>
            </li>
            <li class="has-submenu"><a href="#"><i class="fa fa-star-o"></i> <span
                    class="nav-label">Plugins &amp; More</span></a>
                <ul class="list-unstyled">
                    <li><a href="404.html">404 Page</a></li>
                    <li><a href="invoice.html">Invoice</a></li>
                    <li><a href="elfinder.html">File Manager</a></li>
                    <li><a href="google-maps.html">Google Maps</a></li>
                    <li><a href="signin.html">Signin</a></li>
                    <li><a href="signup.html">Signup</a></li>
                    <li><a href="search.html">Search</a></li>
                    <li><a href="full-screen.html">Full Screen</a></li>
                    <li><a href="blank.html">Blank Page</a></li>

                </ul>
            </li>
        </ul>
    </nav>

</aside>

<section class="content">

    <header class="top-head container-fluid">
        <button type="button" class="navbar-toggle pull-left">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <form role="search" class="navbar-left app-search pull-left hidden-xs">
            <input type="text" placeholder="Enter keywords..." class="form-control form-control-circle">
        </form>

        <nav class=" navbar-default hidden-xs" role="navigation">
            <ul class="nav navbar-nav">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <span class="caret"></span></a>
                    <ul role="menu" class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

        <ul class="nav-toolbar">
            <li class="dropdown"><a href="#" data-toggle="dropdown"><i class="fa fa-comments-o"></i> <span
                    class="badge bg-warning">7</span></a>
                <div class="dropdown-menu md arrow pull-right panel panel-default arrow-top-right messages-dropdown">
                    <div class="panel-heading">
                        Messages
                    </div>

                    <div class="list-group">

                        <a href="#" class="list-group-item">
                            <div class="media">
                                <div class="user-status busy pull-left">
                                    <img class="media-object img-circle pull-left" src="assets/images/avtar/user2.png"
                                         alt="user#1" width="40">
                                </div>
                                <div class="media-body">
                                    <h5 class="media-heading">Lorem ipsum dolor sit consect....</h5>
                                    <small class="text-muted">23 Sec ago</small>
                                </div>
                            </div>
                        </a>
                        <a href="#" class="list-group-item">
                            <div class="media">
                                <div class="user-status offline pull-left">
                                    <img class="media-object img-circle pull-left" src="assets/images/avtar/user3.png"
                                         alt="user#1" width="40">
                                </div>
                                <div class="media-body">
                                    <h5 class="media-heading">Nunc elementum, enim vitae</h5>
                                    <small class="text-muted">23 Sec ago</small>
                                </div>
                            </div>
                        </a>
                        <a href="#" class="list-group-item">
                            <div class="media">
                                <div class="user-status invisibled pull-left">
                                    <img class="media-object img-circle pull-left" src="assets/images/avtar/user4.png"
                                         alt="user#1" width="40">
                                </div>
                                <div class="media-body">
                                    <h5 class="media-heading">Praesent lacinia, arcu eget</h5>
                                    <small class="text-muted">23 Sec ago</small>
                                </div>
                            </div>
                        </a>
                        <a href="#" class="list-group-item">
                            <div class="media">
                                <div class="user-status online pull-left">
                                    <img class="media-object img-circle pull-left" src="assets/images/avtar/user5.png"
                                         alt="user#1" width="40">
                                </div>
                                <div class="media-body">
                                    <h5 class="media-heading">In mollis blandit tempor.</h5>
                                    <small class="text-muted">23 Sec ago</small>
                                </div>
                            </div>
                        </a>

                        <a href="#" class="btn btn-info btn-flat btn-block">View All Messages</a>

                    </div>

                </div>
            </li>
            <li class="dropdown"><a href="#" data-toggle="dropdown"><i class="fa fa-bell-o"></i><span
                    class="badge">3</span></a>
                <div class="dropdown-menu arrow pull-right md panel panel-default arrow-top-right notifications">
                    <div class="panel-heading">
                        Notification
                    </div>

                    <div class="list-group">

                        <a href="#" class="list-group-item">
                            <p>Installing App v1.2.1
                                <small class="pull-right text-muted">45% Done</small>
                            </p>
                            <div class="progress progress-xs no-margn progress-striped active">
                                <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0"
                                     aria-valuemax="100" style="width: 45%">
                                    <span class="sr-only">45% Complete</span>
                                </div>
                            </div>
                        </a>

                        <a href="#" class="list-group-item">
                            Fusce dapibus molestie tincidunt. Quisque facilisis libero eget justo iaculis
                        </a>

                        <a href="#" class="list-group-item">
                            <p>Server Status</p>
                            <div class="progress progress-xs no-margn">
                                <div class="progress-bar progress-bar-success" style="width: 35%">
                                    <span class="sr-only">35% Complete (success)</span>
                                </div>
                                <div class="progress-bar progress-bar-warning" style="width: 20%">
                                    <span class="sr-only">20% Complete (warning)</span>
                                </div>
                                <div class="progress-bar progress-bar-danger" style="width: 10%">
                                    <span class="sr-only">10% Complete (danger)</span>
                                </div>
                            </div>
                        </a>


                        <a href="#" class="list-group-item">
                            <div class="media">
                                <span class="label label-danger media-object img-circle pull-left">Danger</span>
                                <div class="media-body">
                                    <h5 class="media-heading">Lorem ipsum dolor sit consect..</h5>
                                </div>
                            </div>
                        </a>


                        <a href="#" class="list-group-item">
                            <p>Server Status</p>
                            <div class="progress progress-xs no-margn">
                                <div style="width: 60%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60"
                                     role="progressbar" class="progress-bar progress-bar-info">
                                    <span class="sr-only">60% Complete (warning)</span>
                                </div>
                            </div>
                        </a>


                    </div>

                </div>
            </li>
            <li class="dropdown"><a href="#" data-toggle="dropdown"><i class="fa fa-ellipsis-v"></i></a>
                <div class="dropdown-menu lg pull-right arrow panel panel-default arrow-top-right">
                    <div class="panel-heading">
                        More Apps
                    </div>
                    <div class="panel-body text-center">
                        <div class="row">
                            <div class="col-xs-6 col-sm-4"><a href="#" class="text-green"><span class="h2"><i
                                    class="fa fa-envelope-o"></i></span>
                                <p class="text-gray no-margn">Messages</p></a></div>
                            <div class="col-xs-6 col-sm-4"><a href="#" class="text-purple"><span class="h2"><i
                                    class="fa fa-calendar-o"></i></span>
                                <p class="text-gray no-margn">Events</p></a></div>

                            <div class="col-xs-12 visible-xs-block">
                                <hr>
                            </div>

                            <div class="col-xs-6 col-sm-4"><a href="#" class="text-red"><span class="h2"><i
                                    class="fa fa-comments-o"></i></span>
                                <p class="text-gray no-margn">Chatting</p></a></div>

                            <div class="col-lg-12 col-md-12 col-sm-12  hidden-xs">
                                <hr>
                            </div>

                            <div class="col-xs-6 col-sm-4"><a href="#" class="text-yellow"><span class="h2"><i
                                    class="fa fa-folder-open-o"></i></span>
                                <p class="text-gray">Folders</p></a></div>

                            <div class="col-xs-12 visible-xs-block">
                                <hr>
                            </div>

                            <div class="col-xs-6 col-sm-4"><a href="#" class="text-primary"><span class="h2"><i
                                    class="fa fa-flag-o"></i></span>
                                <p class="text-gray">Task</p></a></div>
                            <div class="col-xs-6 col-sm-4"><a href="#" class="text-info"><span class="h2"><i
                                    class="fa fa-star-o"></i></span>
                                <p class="text-gray">Favorites</p></a></div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </header>
    <!-- Header Ends -->


    <div class="warper container-fluid">

        <div class="page-header">
            <h1>UI Elemets
                <small>Let's get a quick overview...</small>
            </h1>
        </div>


        <div class="row">

            <div class="col-md-7">

                <div class="panel panel-default">
                    <div class="panel-heading clean">Popovers</div>
                    <div class="panel-body">

                        <ul class="list-unstyled list-inline showcase-btn">

                            <li>
                                <button type="button" class="btn btn-default popover-btn" data-container="body"
                                        title="Popover title" data-toggle="popover" data-placement="top"
                                        data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                    Popover on top
                                </button>
                            </li>

                            <li>
                                <button type="button" class="btn btn-default popover-btn" data-container="body"
                                        title="Popover title" data-toggle="popover" data-placement="bottom"
                                        data-content="Vivamus
                            sagittis lacus vel augue laoreet rutrum faucibus.">
                                    Popover on bottom
                                </button>
                            </li>

                            <li>
                                <button type="button" class="btn btn-default popover-btn" data-container="body"
                                        title="Popover title" data-toggle="popover" data-placement="right"
                                        data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                    Popover on right
                                </button>
                            </li>

                            <li>
                                <button type="button" class="btn btn-default popover-btn" data-container="body"
                                        title="Popover title" data-toggle="popover" data-placement="left"
                                        data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
                                    Popover on left
                                </button>
                            </li>
                        </ul>

                    </div>
                    <div class="panel-heading clean">Tooltips</div>

                    <div class="panel-body">

                        <ul class="list-unstyled list-inline showcase-btn">

                            <li>
                                <button type="button" class="btn btn-default tooltip-btn" data-toggle="tooltip"
                                        data-placement="left" title="Tooltip on left">Tooltip on left
                                </button>
                            </li>

                            <li>
                                <button type="button" class="btn btn-default tooltip-btn" data-toggle="tooltip"
                                        data-placement="top" title="Tooltip on top">Tooltip on top
                                </button>
                            </li>

                            <li>
                                <button type="button" class="btn btn-default tooltip-btn" data-toggle="tooltip"
                                        data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom
                                </button>
                            </li>

                            <li>
                                <button type="button" class="btn btn-default tooltip-btn" data-toggle="tooltip"
                                        data-placement="right" title="Tooltip on right">Tooltip on right
                                </button>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="page-header">
                    <h3>Accordion
                        <small>Let's get a quick overview...</small>
                    </h3>
                </div>

                <div class="panel-group" id="accordion">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                                    Collapsible Group Item #1
                                </a>
                            </h4>
                        </div>
                        <div id="collapseOne" class="panel-collapse collapse in">
                            <div class="panel-body">
                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
                                squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck
                                quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it
                                squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
                                craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
                                butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth
                                nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                                    Collapsible Group Item #2
                                </a>
                            </h4>
                        </div>
                        <div id="collapseTwo" class="panel-collapse collapse">
                            <div class="panel-body">
                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
                                squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck
                                quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it
                                squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
                                craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
                                butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth
                                nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
                                    Collapsible Group Item #3
                                </a>
                            </h4>
                        </div>
                        <div id="collapseThree" class="panel-collapse collapse">
                            <div class="panel-body">
                                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
                                squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck
                                quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it
                                squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
                                craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
                                butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth
                                nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                            </div>
                        </div>
                    </div>
                </div>

                <hr>

                <div class="page-header">
                    <h3>Alert Messages
                        <small>Let's get a quick overview...</small>
                    </h3>
                </div>

                <div class="panel panel-default">
                    <div class="panel-body">

                        <div class="alert alert-success alert-dismissible" role="alert">
                            <button type="button" class="close" data-dismiss="alert"><span
                                    aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                            <strong>Well done!</strong> You successfully read this important alert message.
                        </div>

                        <div class="alert alert-info alert-dismissible" role="alert">
                            <button type="button" class="close" data-dismiss="alert"><span
                                    aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                            <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
                        </div>

                        <div class="alert alert-warning alert-dismissible" role="alert">
                            <button type="button" class="close" data-dismiss="alert"><span
                                    aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                            <strong>Warning!</strong> Better check yourself, you're not looking too good.
                        </div>

                        <div class="alert alert-danger alert-dismissible" role="alert">
                            <button type="button" class="close" data-dismiss="alert"><span
                                    aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                            <strong>Oh snap!</strong> Change a few things up and try submitting again.
                        </div>

                        <hr>

                        <div role="alert" class="alert alert-success fade in">
                            <button data-dismiss="alert" class="close" type="button"><span
                                    aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                            <h4>Oh snap! You got an error!</h4>
                            <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat
                                porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet
                                fermentum.</p>
                            <p>
                                <button class="btn btn-success" type="button">Take this action</button>
                                <button class="btn btn-default" type="button">Or do this</button>
                            </p>
                        </div>

                        <div role="alert" class="alert alert-info fade in">
                            <button data-dismiss="alert" class="close" type="button"><span
                                    aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                            <h4>Oh snap! You got an error!</h4>
                            <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat
                                porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet
                                fermentum.</p>
                            <p>
                                <button class="btn btn-info" type="button">Take this action</button>
                                <button class="btn btn-default" type="button">Or do this</button>
                            </p>
                        </div>

                        <div role="alert" class="alert alert-warning fade in">
                            <button data-dismiss="alert" class="close" type="button"><span
                                    aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                            <h4>Oh snap! You got an error!</h4>
                            <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat
                                porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet
                                fermentum.</p>
                            <p>
                                <button class="btn btn-warning" type="button">Take this action</button>
                                <button class="btn btn-default" type="button">Or do this</button>
                            </p>
                        </div>

                        <div role="alert" class="alert alert-danger fade in">
                            <button data-dismiss="alert" class="close" type="button"><span
                                    aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                            <h4>Oh snap! You got an error!</h4>
                            <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat
                                porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet
                                fermentum.</p>
                            <p>
                                <button class="btn btn-danger" type="button">Take this action</button>
                                <button class="btn btn-default" type="button">Or do this</button>
                            </p>
                        </div>

                    </div>
                </div>
            </div>

            <div class="col-md-5">

                <div class="panel panel-default">
                    <div class="panel-heading clean">Progress bars</div>
                    <div class="panel-body">

                        <div class="progress progress-xxs">
                            <div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0"
                                 aria-valuemax="100" style="width: 60%">
                                <span class="sr-only">40% Complete (success)</span>
                            </div>
                        </div>

                        <div class="progress progress-xs">
                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
                                 aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                <span class="sr-only">40% Complete (success)</span>
                            </div>
                        </div>

                        <div class="progress progress-sm">
                            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20"
                                 aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                <span class="sr-only">20% Complete</span>
                            </div>
                        </div>

                        <div class="progress">
                            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
                                 aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                60% Complete
                            </div>
                        </div>

                        <div class="progress progress-lg progress-striped">
                            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80"
                                 aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                <span class="sr-only">80% Complete</span>
                            </div>
                        </div>

                        <hr>

                        <div class="progress">
                            <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45"
                                 aria-valuemin="0" aria-valuemax="100" style="width: 45%">
                                <span class="sr-only">45% Complete</span>
                            </div>
                        </div>

                        <hr>

                        <div class="progress">
                            <div class="progress-bar progress-bar-success" style="width: 35%">
                                <span class="sr-only">35% Complete (success)</span>
                            </div>
                            <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
                                <span class="sr-only">20% Complete (warning)</span>
                            </div>
                            <div class="progress-bar progress-bar-danger" style="width: 10%">
                                <span class="sr-only">10% Complete (danger)</span>
                            </div>
                        </div>


                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-heading clean">Labels &amp; Badge</div>
                    <div class="panel-body">

                        <p>
                            <span class="label label-default">Default</span>
                            <span class="label label-primary">Primary</span>
                            <span class="label label-success">Success</span>
                            <span class="label label-info">Info</span>
                            <span class="label label-warning">Warning</span>
                            <span class="label label-danger">Danger</span>
                        </p>

                        <p>
                            <span class="badge bg-primary">15</span>
                            <span class="badge bg-success">20</span>
                            <span class="badge bg-info">21</span>
                            <span class="badge bg-dark">13</span>
                            <span class="badge bg-warning">35</span>
                            <span class="badge bg-danger">32</span>
                            <span class="badge">9</span>
                        </p>


                    </div>
                </div>


                <div class="panel panel-default">
                    <div class="panel-heading clean">Modals</div>
                    <div class="panel-body">

                        <button class="btn btn-purple btn-sm" data-toggle="modal" data-target="#modal-normal">Normal
                            Size
                        </button>
                        <button class="btn btn-green btn-sm" data-toggle="modal" data-target="#modal-large">Large Size
                        </button>
                        <button class="btn btn-warning btn-sm" data-toggle="modal" data-target="#modal-small">Small
                            Size
                        </button>

                        <hr class="xs">

                        <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#modal-form">With Form
                        </button>
                        <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#modal-noanimation">No
                            Animation
                        </button>
                        <button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#modal-noheadfoot">No
                            Header/Footer
                        </button>

                    </div>
                </div>


                <div class="page-header">
                    <h3>Togglable Tabs
                        <small>Let's get a quick overview...</small>
                    </h3>
                </div>

                <ul role="tablist" class="nav nav-tabs" id="myTab">
                    <li class="active"><a data-toggle="tab" role="tab" href="#home">Home</a></li>
                    <li><a data-toggle="tab" role="tab" href="#profile">Profile</a></li>
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" id="myTabDrop1" href="#">Dropdown <span
                                class="caret"></span></a>
                        <ul aria-labelledby="myTabDrop1" role="menu" class="dropdown-menu">
                            <li><a data-toggle="tab" role="tab" tabindex="-1" href="#dropdown1">@fat</a></li>
                            <li><a data-toggle="tab" role="tab" tabindex="-1" href="#dropdown2">@mdo</a></li>
                        </ul>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div id="home" class="tab-pane tabs-up fade in active panel panel-default">
                        <div class="panel-body">
                            <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown
                                aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
                                helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu
                                banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone.
                                Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
                        </div>
                    </div>
                    <div id="profile" class="tab-pane tabs-up fade panel panel-default">
                        <div class="panel-body">
                            <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.
                                Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson
                                artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo
                                enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud
                                organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia
                                yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes
                                anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson
                                biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente
                                accusamus tattooed echo park.</p>
                        </div>
                    </div>
                    <div id="dropdown1" class="tab-pane tabs-up fade panel panel-default">
                        <div class="panel-body">
                            <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's
                                organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify
                                pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy
                                hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred
                                pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie
                                etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl
                                craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
                        </div>
                    </div>
                    <div id="dropdown2" class="tab-pane tabs-up fade panel panel-default">
                        <div class="panel-body">
                            <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold
                                out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack
                                portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred
                                vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral
                                locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft
                                beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
                        </div>
                    </div>
                </div>

                <div class="page-header">
                    <h3>Carousel
                        <small>Let's get a quick overview...</small>
                    </h3>
                </div>

                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    </ol>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="assets/images/carousel/4.jpg" alt="...">
                            <div class="carousel-caption">
                                <h3>First slide label</h3>
                                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="assets/images/carousel/1.jpg" alt="...">
                            <div class="carousel-caption">
                                <h3>First slide label</h3>
                                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="assets/images/carousel/2.jpg" alt="...">
                            <div class="carousel-caption">
                                <h3>First slide label</h3>
                                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                            </div>
                        </div>
                    </div>

                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>
                </div>

            </div>

        </div>


    </div>
    <!-- Warper Ends Here (working area) -->


    <footer class="container-fluid footer">
        Copyright &copy; 2014 <a href="http://freakpixels.com/" target="_blank">FreakPixels</a>
        <a href="#" class="pull-right scrollToTop"><i class="fa fa-chevron-up"></i></a>
    </footer>


</section>
<!-- Content Block Ends Here (right box)-->


<!-- Modal Normal Size -->
<div class="modal fade" id="modal-normal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Normal size modal</h4>
            </div>
            <div class="modal-body">
                <p>This is an example of normal size modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Large Size -->
<div class="modal fade" id="modal-large" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Large size modal</h4>
            </div>
            <div class="modal-body">
                <p>This is an example of large size modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Small Size -->
<div class="modal fade" id="modal-small" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Small size modal</h4>
            </div>
            <div class="modal-body">
                <p>This is an example of small size modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>


<!-- Modal With Form -->
<div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Form in moadl</h4>
            </div>
            <div class="modal-body">

                <form role="form">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Password</label>
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> Check me out
                        </label>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>


<!-- Modal Without header footer -->
<div class="modal fade" id="modal-noheadfoot" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content panel-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet tellus ut tincidunt euismod. Nam
                fermentum, massa sit amet pulvinar laoreet, sem mi viverra turpis, ac porta felis nisl eu odio. Donec id
                lacus vitae ex sagittis bibendum. Sed porttitor nunc a erat volutpat, id molestie odio aliquam. Nunc sit
                amet blandit urna, non condimentum mi.</p>
        </div>
    </div>
</div>

<div class="modal" id="modal-noanimation" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content panel-body">
            <h3 class="text-center">Without Animation</h3>
            <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam laoreet tellus ut
                tincidunt euismod.</p>
        </div>
    </div>
</div>


<!-- JQuery v1.9.1 -->
<script src="assets/js/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>

<!-- Bootstrap -->
<script src="assets/js/bootstrap/bootstrap.min.js"></script>

<!-- NanoScroll -->
<script src="assets/js/plugins/nicescroll/jquery.nicescroll.min.js"></script>


<!-- Custom JQuery -->
<script src="assets/js/app/custom.js" type="text/javascript"></script>


<script>
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function () {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date();
        a = s.createElement(o),
                m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-56821827-1', 'auto');
    ga('send', 'pageview');

</script>
</body>
</html>
